import './index.scss';
import {useEffect} from "react";
import * as echarts from "echarts";

const YAxis_Data = ['保理', '银行', '券商', '小贷', '期货'];

const rankPic = {
    first: require('../../assets/images/top01.png'),
    second: require('../../assets/images/top02.png'),
    third: require('../../assets/images/top03.png'),
    fourth: require('../../assets/images/top04.png'),
    fifth: require('../../assets/images/top05.png'),
}

const gs_data = [19, 23, 25, 32, 18]
const sf_data = [14, 14, 14, 14, 14]
const zx_data = [12, 12, 12, 12, 12]
const rq_data = [8, 8, 8, 8, 8]
const qt_data = [6, 6, 6, 6, 6]

const SubsidiaryCallRank = () => {

    useEffect(() => {
        init()
    }, [])

    function init() {
        // 初始化echarts实例，将其挂载到id为main的dom元素上展示
        let myChart = echarts.init(document.getElementById("scr-chart"));
        let option = {
            tooltip: {
                show: false,
                trigger: 'axis',
                formatter: function (params: string | any[]) {
                    let relVal = params[0].name;
                    let i = 0, l = params.length;
                    for (; i < l; i++) {
                        if (params[i].seriesType === "bar") {
                            let value
                            if (params[i].value) {
                                value = params[i].value
                            } else {
                                value = 0
                            }
                            relVal += '<br/>' + params[i].seriesName + ' : ' + value + "%";
                        }
                    }
                    return relVal;
                },
            },
            legend: {
                show: false,
                orient: 'vertical', // 横向排列
                right: '10%'
            },
            grid: {
                left: '4%',
                right: '8%',
                bottom: '30%',
                top: '4%',
                containLabel: true
            },
            xAxis: {
                type: 'value',
                axisTick: {
                    show: false
                },
                axisLabel: {
                    show: false,
                },
                splitLine: {// 分隔线
                    show: false,
                },
            },
            yAxis: [
                {
                    type: 'category',
                    axisTick: {
                        show: false
                    },
                    axisLine: { // 隐藏Y轴
                        show: false
                    },
                    axisLabel: {
                        fontSize: 12,
                        color: '#EFFAFF',
                        formatter: function (value: string) {
                            let valueIndex = 0
                            YAxis_Data.forEach((item, index) => {
                                if (item == value) {
                                    valueIndex = index
                                }
                            })
                            return '{' + (valueIndex + 1) + '|} {s|' + value + '}'
                        },
                        rich: {
                            1: {
                                height: 20,
                                verticalAlign: 'center',
                                backgroundColor: {
                                    image: rankPic.first
                                },
                                marginRight: 10,
                            },
                            2: {
                                height: 20,
                                verticalAlign: 'center',
                                backgroundColor: {
                                    image: rankPic.second
                                }
                            },
                            3: {
                                height: 20,
                                verticalAlign: 'center',
                                backgroundColor: {
                                    image: rankPic.third
                                }
                            },
                            4: {
                                height: 20,
                                verticalAlign: 'center',
                                backgroundColor: {
                                    image: rankPic.fourth
                                }
                            },
                            5: {
                                height: 20,
                                verticalAlign: 'center',
                                backgroundColor: {
                                    image: rankPic.fifth
                                }
                            },
                        }
                    },
                    inverse: true,
                    data: YAxis_Data
                },
                {
                    position: 'right',
                    data: [800, 541, 262, 385, 445],
                    axisTick: {
                        show: false
                    },
                    inverse: true,
                    axisLine: {
                        show: false
                    },
                    axisLabel: {
                        color: '#EFFAFF'
                    }
                }
            ],
            series: [
                {
                    name: '工商',
                    type: 'bar',
                    stack: 'total',
                    label: {
                        show: true,
                        position: 'inside', //数值展示的位置
                        textStyle: {
                            color: '#ffffff',
                            fontSize: 10
                        },
                        formatter: function (params: any) {
                            return "工商" + Math.round(params.value) + '%'
                        }
                    },
                    emphasis: {
                        focus: 'series'
                    },
                    data: gs_data,
                    barWidth: 16,
                    itemStyle: {
                        normal: {
                            color: function () {
                                return new echarts.graphic.LinearGradient(0, 0, 1, 0,
                                    [{offset: 0, color: '#1B63CC'}, {offset: 1, color: '#03DFFC'}]);
                            }
                        },
                    },
                },
                {
                    name: '司法',
                    type: 'bar',
                    stack: 'total',
                    label: {
                        show: true,
                        position: 'inside', //数值展示的位置
                        textStyle: {
                            color: '#ffffff',
                            fontSize: 10
                        },
                        formatter: function (params: any) {
                            return "司法" + Math.round(params.value) + '%'
                        }
                    },
                    emphasis: {
                        focus: 'series'
                    },
                    data: sf_data,
                    itemStyle: {
                        normal: {
                            color: function () {
                                return new echarts.graphic.LinearGradient(0, 0, 1, 0,
                                    [{offset: 0, color: '#05A998'}, {offset: 1, color: '#63FBFC'}]);
                            }
                        },
                    },
                },
                {
                    name: '征信',
                    type: 'bar',
                    stack: 'total',
                    label: {
                        show: true,
                        position: 'inside', //数值展示的位置
                        textStyle: {
                            color: '#ffffff',
                            fontSize: 10
                        },
                        formatter: function (params: any) {
                            return "征信" + Math.round(params.value) + '%'
                        }
                    },
                    emphasis: {
                        focus: 'series'
                    },
                    data: zx_data,
                    barWidth: 14,
                    itemStyle: {
                        normal: {
                            color: function () {
                                return new echarts.graphic.LinearGradient(0, 0, 1, 0,
                                    [{offset: 0, color: '#2D5CBD'}, {offset: 1, color: '#40A0FA'}]);
                            }
                        },
                    },
                },
                {
                    name: '燃气',
                    type: 'bar',
                    stack: 'total',
                    label: {
                        show: true,
                        position: 'inside', //数值展示的位置
                        textStyle: {
                            color: '#ffffff',
                            fontSize: 10
                        },
                        formatter: function (params: any) {
                            return "燃气" + Math.round(params.value) + '%'
                        }
                    },
                    emphasis: {
                        focus: 'series'
                    },
                    data: rq_data,
                    itemStyle: {
                        normal: {
                            color: function () {
                                return new echarts.graphic.LinearGradient(0, 0, 1, 0,
                                    [{offset: 0, color: '#3023AE'}, {offset: 1, color: '#966DD7'}]);
                            }
                        },
                    },
                },
                {
                    name: '其它',
                    type: 'bar',
                    stack: 'total',
                    label: {
                        show: true,
                        position: 'inside', //数值展示的位置
                        textStyle: {
                            color: '#ffffff',
                            fontSize: 10
                        },
                        formatter: function (params: any) {
                            return "其它" + Math.round(params.value) + '%'
                        }
                    },
                    emphasis: {
                        focus: 'series'
                    },
                    data: qt_data,
                    itemStyle: {
                        normal: {
                            color: function () {
                                return new echarts.graphic.LinearGradient(0, 0, 1, 0,
                                    [{offset: 0, color: 'rgba(255,255,255,0.3)'}, {
                                        offset: 1,
                                        color: 'rgba(255,255,255,0.3)'
                                    }]);
                            }
                        },
                    },
                },
            ]
        };
        // 绘制图表
        myChart.setOption(option);
    }

    return (
        <div className='scr-container'>
            <div className='scr-title'>子公司调用排名</div>
            <div id='scr-chart' className='scr-echart'></div>
        </div>
    )
}

export default SubsidiaryCallRank;
